<template>
	<DetailContainer>
		<div ref="fireworksContainer" class="fireworks-container"></div>
<!--		<Firework2/>-->
	</DetailContainer>
</template>

<script setup>
import DetailContainer from "@/components/DetailContainer.vue";
import { ref, onMounted } from 'vue';
import Fireworks from 'fireworks-js';
// import Firework2 from "@/views/Firework/firework2.vue";

const fireworksContainer = ref(null);

const opts = {
	traceLength: 4.5,
	traceSpeed: 10,
	hue: {
		min: 0,
		max: 345
	},
	acceleration: 1,
	brightness: {
		min: 1,
		max: 100
	},
	decay: {
		min: 0.001,
		max: 0.050
	},
	delay: {
		min: 10,
		max: 30
	},
	explosion: 10,
	flickering: 55,
	intensity: 60,
	friction: 0.95,
	gravity: 1.3,
	opacity: 0.5,
	particles: 200,
	rocketsPoint: {
		x: 50,
		y: 50
	},
};

const initFireworks = () => {
	const container = fireworksContainer.value;
	const fireworks = new Fireworks(container, opts);
	fireworks.start();
};

onMounted(() => {
	initFireworks();
});
</script>

<style>
* {
	margin: 0;
	padding: 0;
}

.fireworks-container {
	width: 100%;
	height: 100vh;
	background: #000000;
	overflow: hidden;
}
</style>
